function degToArc(angle)
{
	ang=360-angle;
	var r=ang*(Math.PI/180);
	//alert(""+angle+", "+r);
	return r;
}
function JSCanvasImage(oJSCanvas,src,callback)
{
	var self=this; // reference to this
	var _oJSCanvas=oJSCanvas; // reference to canvas
	var _img=new Image(); // reference to the image object
	this.loaded=false; // is loaded??
	this.error=false;  // any errors??
	
	/*
  * Load event handling and callback invoke
  * 
  */    
	_img.onload=function(){self.loaded=true;callback(self,true);};
	
	/* 
  * Error event handling and callback invoke
  *   
  * /  
	_img.onerror=function(){self.error=true;callback(self,false);};
	
	/*
  * Asign source image path
  *
  */      
	_img.src=src;
	
	/*
	* Draw Image with x and y position.
	*
	* @param x X position
	* @param y Y position	
	*/    	
	this.draw=function(x,y){
		_oJSCanvas.drawImage(_img,x,y);
	};
	
	/*
	* Draws the image with Width and Height.
	*
	* @param x X position
	* @param y Y position
	* @param w Width
	* @param h Height    	
	*/    	
	this.drawWH=function(x,y,w,h)
	{
		_oJSCanvas.drawImageWH(_img,x,y,w,h);
	}
}

/**
 * @class JSCanvasLib Basic Script
 *
 */  
function JSCanvasLib(idCanvas)
{
	var self=this;
	var _canvas;
	var _context;
	this.lastError="";
	this.anyErrors=false;
	this.canWork=true;
	
	/**
	 * Set error
	 *
	 * @param text Texto to represent the error message
	 *   	 
	 */      	
	this.setError=function(text)
	{
    self.anyErrors=true;
    self.lastError=text;	 
  }
  
  /**
   * Clear all errors
   *
   */           
  this.clearErrors=function()
  {
    self.anyErrors=false;
    self.lastError="";
  }
  
  /**
   * Constructor (??)
   *
   * @param id Id of the canvas object in the Page.  
   */        
	this.jscanvas=function(id){
    self.clearErrors();
    try
    {
  		_canvas = document.getElementById(id);
  		_context = _canvas.getContext("2d");
    }catch(anError)
    {
      self.canWork=false;
      self.setError("Internal Error: "+anError.message);
    }
	};


  /**
   * Load images and spects a callback to inform.
   * Notes:
   * The callback function needs parameters:
   *  - ocanvas Canvas reference
   *  - imgname Image name (key)
   *  - per1 Loading progress based on 1 (0 to 1 numbers).
   *  - errors Number of not loaded images
   *  - lst The list of JSCanvasImage instances with the same keys of the original array      
   *   
   * @param imglst List of images (array with keys {'img1': 'image.jpg'} ).  
   * @param callback callback function to inform.
   */           
	
	this.loadImages=function(imglst,callback){
		nlst=new Array();
		tot=0;
		toterrors=0;
		loaded=0;
		for(k in imglst)
		{
			tot++;
		}

		for(k in imglst)
		{
			nlst[k]=new JSCanvasImage(self,imglst[k],function(x,ok){
				if(ok){
					loaded++;
				}else{
					toterrors++;
				}
				
				per=(loaded/tot);
				callback(self,k,per,toterrors,nlst);
			});
			//alert(k);
		}
	};
	
	/**
	 * Fills a rectangle area
	 * 
	 * @param x X position  	 
	 * @param y Y position  	 
	 * @param w Width  	 
	 * @param h Height  	 
	 * @param fc Fill Color
	 * @param sc Stroke Color (border color)     	 
	 *
	 */      	
	this.fillRect=function(x,y,w,h,fc,sc)
	{
		_context.beginPath();
		_context.rect(x, y, w, h);
	 
		_context.fillStyle = fc;
		_context.fill();
		_context.lineWidth = 1;
		_context.strokeStyle = sc;
		_context.stroke();
	}
	
	/**
	 * Draw image with x and y position
	 *
	 *	@param img Image object (not JSCanvasImage but a normal Image object). 
	 *  @param x X position
	 *  @param y Y position	 
	 */         	
	this.drawImage=function(img,x,y){
		_context.drawImage(img, x,y);
	};
	
	/**
	 * Draws image with diferent Width and Height
	 *
	 *	@param img Image object (not JSCanvasImage but a normal Image object). 
	 *  @param x X position
	 *  @param y Y position
	 *  @param w Width
	 *  @param h Height      	 
	 *
	 */         	
	this.drawImageWH=function(img,x,y,w,h){
		_context.drawImage(img, x,y,w,h);
	};
	
	
	/**
	 *  Draws a line
	 *	 
	 *  @param x X position
	 *  @param y Y position
	 *  @param x2 X2 position
	 *  @param y2 Y2 position
	 *
	 */      	
	this.drawLine=function(x,y,x2,y2){
		_context.beginPath();
		_context.moveTo(x,y);
		_context.lineTo(x2,y2);
		_context.lineWidth = 1;
		_context.stroke();
	};
	
	/**
	 * Sets the actual font to use (afects drawText).
	 *
	 *	@param fontName Font name to use (example: "12pt Arial"). 
	 *
	 */         	
	this.setFont=function(fontName)
	{
		_context.font = fontName;
		
	}
	
	
	/**
	 * Draws Text to canvas with a selected color
	 * Note: setFont afects the font to draw.	 
	 *
	 * @param x X Position 
	 * @param y Y Position 
	 * @param color Color of the font 
	 * @param text Texto to draw 
	 *
	 */         	
	
	this.drawText=function(x,y,color,text)
	{
	    _context.fillStyle = color; // text color
		_context.lineWidth = 1;
    	_context.fillText(text, x, y);
	}
	
	
	
	this.drawArc=function(centerX, centerY, radius, startingAngleDeg, endingAngleDeg, counterclockwise)
	{
		_context.beginPath();
		_context.arc(centerX, centerY, radius, degToArc(startingAngleDeg), degToArc(endingAngleDeg), counterclockwise);
		_context.lineWidth = 1;
		_context.stroke();
	}
	
	/**
	 * Set the color (afects draw line).
	 *
	 * @param aColor The color to use (example: "#000000" or named color "black"). 
	 *
	 */         	
	this.setColor=function(aColor){
		_context.strokeStyle = aColor;
	};
	this.getVersion=function(){return "0.1.0"};
	this.jscanvas(idCanvas);
	return this;
}
